<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Keyboard Input for chat-bubble</title>

	<!-- for mobile screens -->
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<!-- stylesheets are conveniently separated into components -->
	<link rel="stylesheet" media="all" href="../component/styles/setup.css">
	<link rel="stylesheet" media="all" href="../component/styles/says.css">
	<link rel="stylesheet" media="all" href="../component/styles/reply.css">
	<link rel="stylesheet" media="all" href="../component/styles/typing.css">
	<link rel="stylesheet" media="all" href="../component/styles/input.css">
	<style>
	body {
		background: #dcdde0;
	}
	.bubble-container {
		height: 100vh;
	}
	.bubble-container .input-wrap textarea {
		margin: 0;
		width: calc(100% - 30px);
	}
	</style>
</head>
<body>

<!-- container element for chat window -->
<div id="chat"></div>

<!-- import the JavaScript file -->
<script src="../component/Bubbles.js"></script>
<script>
// initialize by constructing a named function...
// ...and add text processing plugin:
var chatWindow = new Bubbles(document.getElementById("chat"), "chatWindow", {
  // the one that we care about is inputCallbackFn()
  // this function returns an object with some data that we can process from user input
  // and understand the context of it

  // this is an example function that matches the text user typed to one of the answer bubbles
  // this function does no natural language processing
  // this is where you may want to connect this script to NLC backend.
  inputCallbackFn: function(o) {
    // add error conversation block & recall it if no answer matched
    var miss = function() {
      chatWindow.talk(
        {
          "i-dont-get-it": {
            says: [
              "Sorry, I don't get it 😕. Pls repeat? Or you can just click below 👇"
            ],
            reply: o.convo[o.standingAnswer].reply
          }
        },
        "i-dont-get-it"
      )
    }

    // do this if answer found
    var match = function(key) {
      setTimeout(function() {
        chatWindow.talk(convo, key) // restart current convo from point found in the answer
      }, 600)
    }

    // sanitize text for search function
    var strip = function(text) {
      return text.toLowerCase().replace(/[\s.,\/#!$%\^&\*;:{}=\-_'"`~()]/g, "")
    }

    // search function
    var found = false
    o.convo[o.standingAnswer].reply.forEach(function(e, i) {
      strip(e.question).includes(strip(o.input)) && o.input.length > 0
        ? (found = e.answer)
        : found ? null : (found = false)
    })
    found ? match(found) : miss()
  }
}) // done setting up chat-bubble

// conversation object defined separately, but just the same as in the
// "Basic chat-bubble Example" (1-basics.html)
var convo = {
  ice: {
    says: ["Hi", "Would you like banana or ice cream?"],
    reply: [
      {
        question: "Banana",
        answer: "banana"
      },
      {
        question: "Ice Cream",
        answer: "ice-cream"
      }
    ]
  },
  banana: {
    says: ["🍌"],
    reply: [
      {
        question: "Start Over",
        answer: "ice"
      }
    ]
  },
  "ice-cream": {
    says: ["🍦"],
    reply: [
      {
        question: "Start Over",
        answer: "ice"
      }
    ]
  }
}

// pass JSON to your function and you're done!
chatWindow.talk(convo)
</script>
</body>
